<script setup lang="ts">
import { useRouter } from 'vue-router';

const fncs = [
  {
    title: '选品',
    icon: '',
    path: '',
    children: [
      {
        title: '1688数据采集中心',
        icon: '',
        path: '/getgoods/1688-air',
      },
      {
        title: '1688严选货源',
        icon: '',
        path: '/getgoods/1688-strict-selection',
      },
      {
        title: '链接铺货',
        icon: '',
        path: '/getgoods/uselinktosell',
      },
      {
        title: '铺货记录',
        icon: '',
        path: '/records/up-pruduct-records',
      },
    ],
  },
  {
    title: '订单商品',
    icon: '',
    path: '',
    children: [
      {
        title: '商品管理',
        icon: '',
        path: '/shop-goods/up-shop-goods',
      },
      {
        title: '订单管理',
        icon: '',
        path: '/shop-order/up-shop-orders',
      },
      {
        title: '售后管理',
        icon: '',
        path: '/shop-as/as-list',
      },
    ],
  },
  {
    title: '设置',
    icon: '',
    path: '',
    children: [
      {
        title: '铺货设置',
        icon: '',
        path: '/shop-seting/seting-add-config',
      },
      {
        title: '下单设置',
        icon: '',
        path: '/shop-seting/buy-order',
      },
      {
        title: '店铺授权',
        icon: '',
        path: '/shop-auth/shop-auth-home',
      },
    ],
  },
];
const router = useRouter();
function gotopath(params: any) {
  router.push(params.path);
}
</script>

<template>
  <div
    class="bg-card text-card-foreground border-border mt-5 rounded-xl border lg:mt-0"
  >
    <div class="flex flex-col gap-y-1.5 p-5 py-4">
      <h3 class="text-lg font-semibold tracking-tight">订单必备</h3>
    </div>
    <div class="flex w-full">
      <div
        v-for="(item, index) in fncs"
        :key="index"
        :class="index !== fncs.length - 1 ? 'border-r' : ''"
        class="flex-1 border-t"
      >
        <div class="flex flex-col gap-y-1.5 border-b p-5 py-4 text-center">
          <h3 class="text-base font-medium tracking-tighter">
            {{ item.title }}
          </h3>
        </div>
        <div v-for="(item2, index2) in item.children" :key="index2">
          <div
            :class="index2 !== item.children.length - 1 ? 'border-b' : ''"
            class="haoweiboter flex cursor-pointer flex-col gap-y-1.5 p-5 py-4 text-center"
            @click="() => gotopath(item2)"
          >
            <h3 class="text-xs font-light tracking-tighter">
              <a-button type="link">
                {{ item2.title }}
              </a-button>
            </h3>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<style scoped lang="scss">
.haoweiboter {
  transition: transform 0.1s ease-in-out;

  &:hover {
    // 放大后置顶覆盖其他元素

    // 背景白色
    background-color: #fff;

    // 圆角
    border-radius: 10px;
    //下阴影

    box-shadow: 0 4px 8px rgb(0 0 0 / 20%);

    // 过渡效果

    // 放大0.2倍
    transform: scale(1.2);
  }
}
</style>
